<template>
    <div>
        <Form ref="formValidate" :label-width="100" style="margin-top: 20px;">
            <Row>
                <FormItem label="短信配置">
                    <Row>
                        key：
                        <Input v-model="configInfo.sms_config.sms_key" placeholder="" style="width: 300px;"
                            type="text"></Input>
                        secret：
                        <Input v-model="configInfo.sms_config.sms_secret" placeholder="" style="width: 300px;"
                            type="text"></Input>
                        签名：
                        <Input v-model="configInfo.sms_config.sign" placeholder="" style="width: 300px;"
                            type="text"></Input>
                        模板ID：
                        <Input v-model="configInfo.sms_config.templateId" placeholder="" style="width: 300px;"
                            type="text"></Input>
                    </Row>
                </FormItem>
                <FormItem label="语音短信配置">
                    <Row>
                        key：
                        <Input v-model="configInfo.sms_voice_config.sms_key" placeholder="" style="width: 300px;"
                            type="text"></Input>
                        secret：
                        <Input v-model="configInfo.sms_voice_config.sms_secret" placeholder="" style="width: 300px;"
                            type="text"></Input>
                        签名：
                        <Input v-model="configInfo.sms_voice_config.sign" placeholder="" style="width: 300px;"
                            type="text"></Input>
                        模板ID：
                        <Input v-model="configInfo.sms_voice_config.templateId" placeholder="" style="width: 300px;"
                            type="text"></Input>
                    </Row>
                </FormItem>
            </Row>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Alert } from "view-design";
export default {
    components: {
        Editor, Toolbar,
        Alert
    },
    data() {
        return {
            //运营商列表
            action_url: baseUrl + "/admin/image/uploadImg",
            imgUrl: '',
            baseImgeUrl: baseImgeUrl,
            visible: false,
            header: { Authorization: getToken() },
            value: "",
            configInfo: {
                sms_config: {
                    sms_key: "",
                    sms_secret: "",
                    sign: "",
                    sms_key: "",
                },
                sms_voice_config: {
                    sms_key: "",
                    sms_secret: "",
                    sign: "",
                    sms_key: "",
                },
            }
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        getConfigInfo() {
            this.$axios('/admin/config/getConfigInfo', { type: 5 }).then(res => {
                this.configInfo = res;
            });
        },
        handleSubmit(name) {
            this.$axios('/admin/config/setConfig', this.configInfo).then(res => {
                this.$Message.success('保存成功');
                this.getConfigInfo();
            })
        },
        //图片类型错误
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        //logo
        handleSuccessLogo(res, file) {
            let src = res.data;
            this.configInfo.logo = src;
        },
        //Favicon
        handleSuccessFavicon(res, file) {
            let src = res.data;
            this.configInfo.favicon_img = src;
        },
        // 后台登录图
        handleSuccessLogin(res, file) {
            let src = res.data;
            this.configInfo.login_img = src;
        },
    },
    created() {
        this.getConfigInfo();
    },
}

</script>
<style>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>